<template>
  <div>
    <div class="title">
      <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
      <span class="title-span">热门推荐</span>
    </div>
    <ul>
      <router-link
        class="item border-bottom"
        v-for="item of list"
        :key="item.id"
        tag="li"
        :to="'/detail/' + item.id"
      >
          <div class="item-img-container">
            <img :src="item.imgUrl" alt="">
          </div>
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc">{{item.desc}}</p>
            <div class="item-info-botton">
              <button class="item-button">查看详情</button>
              <div class="item-location">{{item.location}}</div>
            </div>
          </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  },
  data () {
    return {
      recommendList: [
        {
          id: '0001',
          title: '重庆柏联温泉',
          desc: '露天园林温泉汤池与书香诗意的完美结合',
          location: '北碚',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/201401/29/8e60d7bb448bc8d4652efb382324076f.jpg_200x200_45d36d9b.jpg'
        }, {
          id: '0002',
          title: '重庆杜莎夫人蜡像馆',
          desc: '露天园林温泉汤池与书香诗意的完美结合',
          location: '南岸',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1805/d1/d104b7ec6826de79a3.img.jpg_200x200_47aed401.jpg'
        }, {
          id: '0003',
          title: '乐和乐都主题公园',
          desc: '您和孩子开怀大笑的好去处',
          location: '武隆',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/2001/5a/5ae854e3784878f0a3.img.jpg_200x200_1c78a891.jpg'
        }
      ]
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import "~styles/mixins.styl"
  .title
    padding 0 .1rem
    img
      position relative
      top -0.1rem
      width .3rem
      height .3rem
    .title-span
      margin-left 0.05rem
      line-height .8rem
      background #eee
      margin-top .1rem
      text-indent .2rem
      font-size .32rem
  .item
    display flex
    overflow hidden
    height 1.9rem
    /*background red*/
    img
      width 1.7rem
      height 1.7rem
      padding .1rem
    .item-info
      flex 1
      padding .1rem
      min-width 0
      .item-title
        font-size .32rem
        line-height .54rem
        ellipse()
      .item-desc
        line-height .4rem
        color #ccc
        ellipsis()
      .item-button
        line-height .44rem
        margin-top .16rem
        background #ff9300
        padding 0 .2rem
        border-radius 0.06rem
        color #fff
      .item-info-botton
        display flex
        justify-content space-between
        .item-location
          font-size 0.32rem
          color #333
          width 0.72rem
          height 0.52rem
          line-height 0.72rem
          vertical-align bottom
          margin-top 0.16rem
</style>
